<template>
  <div class="body">
    <Header/>
    <Content>
      <router-view/>
    </Content>
    <Footer/>
  </div>
</template>

<script>
import Header from "./header.vue";
import Content from "./content.vue";
import Footer from "./footer.vue";

export default {
    components: {
        Header,
        Content,
        Footer
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.body {
  width:80%;
  margin-left:10%;
}
.flex-border {
  display: flex;
  /* flex-direction: row; */
  justify-content: space-between;
}
.inline {
  display: flex;
  align-content: flex-start;
  flex-basis: 500px;
}
.inline-right {
  display: flex;
  align-content: flex-start;
  flex-basis: 260px;
}
span {
  font-size: 12px;
}
.right {
  padding: 0 20px 0 10px;
  float: right;
}
.item {
  margin-top: -10px;
}
.el-menu-demo {
  width: 3000px;
  font-size: 50px;
  font-weight: bolder;
}
.block {
  margin-left: 200px;
}
</style>
